<template>
        <div class="phoneKey">
            <!-- 顶部状态栏 -->
            <div class="top">
                    <van-icon name="arrow-left" size="20px" @click="goback()"/>
                    <div>手机开门</div>
            </div>
           <div class="banner">
               <img src="../assets/img/img2/v2_pyby1l.jpg" alt="">
           </div>
            <div class="name">
                让 开 门 更 智 能
            </div>

            <div class="mykey">
                <div class="title">
                    我的钥匙
                    <img src="../assets/img/img2/key.png" alt="">
                </div>
                <div id="box">
                        <div class="keyList" v-for="(item,index) of keyList" :key="index">
                            <div id="box1">
                                <img src="../assets/img/img2/whitekey.png" alt="">
                                <div class="doorname">
                                    {{item}}
                                </div>
                            </div>
                        </div>
                </div>
               
            </div>
        </div>
    </template>
    
    <script>
        import {mapState,mapActions} from 'vuex'
    
        import { Icon } from 'vant'
    
        export default {
            // 当前组件的名称
            name: 'home',
    
            data(){
                return {
                    communityName:"翡翠一品",
                    keyList:["小区大门口","一栋一单元","一栋二单元","一栋三单元"]
                }
            },
    
            // 在当前组件中添加其他的自定义组件
            components: {
                
            },
    
            /*
                在computed中添加mapState
                如果computed中只有一个辅助函数，后面可以直接写成函数名
            */		
            computed: mapState(['token','userInfo']), // this.token相当于this.$store.state.token
    
            methods: {
                callPhone(){
    
                },
                goback(){
                    this.$router.back()
                }
            },
            // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
            created(){
                console.log('created',this.$el)
            },
            // 生命周期函数,当前组件上的所有DOM节点都已经创建出来
            mounted(){
                console.log('mounted',this.$el)
    
                // 监听页面滚动,显示返回顶部的图标
                // window.onscroll = this.onScroll
    
                // 请求获取轮播图
                //this.reqSwiperItems()
                // 请求获取商品列表的第一页
                //this.reqGoodsList()
    
                // 获取存在本地的token
                // const token = localStorage.getItem('token')
                // 把token存到当前组件的data中
                // this.token = token
    
                // 从store中获取最新的token
                // this.token = this.$store.state.token
    
                // console.group('-----------睁大你的狗眼-----------')
                // console.log('home里面的token为',this.token)
                // console.groupEnd()
            },
            // 生命周期函数,当数据发生改变并且导致视图发生相应的改变
            updated(){
                // console.log('updated')
            },
            // 生命周期函数,组件被销毁
            destroyed(){
                console.log('destroyed')
            },
            // 生命周期函数,进入缓存组件
            activated(){
                console.log('activated')
    
                // 再次回来的时候,直接滚动到之前离开时候保存的位置
            
    
                // 如果每次进入缓存组件的时候，需要实时更新当前组件中的内容，可以将这些更新代码写在activated
    
                // 请求获取用户信息
                // this.reqUserInfo()
                // this.$store.dispatch('changeUserInfo2')
            
            },	
            // 生命周期函数,离开缓存组件
            deactivated(){
                console.log('deactivated')
    
                // 不要尝试去获取页面的scrollTop,因为页面只有一个,跳转到新的路由,页面的scrollTop会变成0
                // 所以,在离开的时候,把当前组件的scrollTop保存下来,赋给一个新的变量
                // this.cache_scrollTop = this.scrollTop
            },
            // 离开路由之前,它会在deactivated之前调用
            beforeRouteLeave(to,from,next){
                console.log('beforeRouteLeave')
    
                // 1.获取页面的scrollTop,赋给一个新的变量
                // this.cache_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    
                // 2.获取顶部状态栏距离父元素底部的距离,赋给一个新的变量
            
    
                // 必须调用next,否则就不会离开当前路由
                next()
            }
        }
    </script>
    
    <!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
    <style lang="scss" scoped>
        .top{
            
            height:40px;
            line-height: 40px;
            position: relative;
            font-size: 16px;
        }
        .top div{
            text-align: center;
          
        }
        .van-icon-arrow-left{
            position: absolute;
            top:10px;
        }
        .banner img{
            width: 100%;
        }
        .name{
            text-align: center;
            font-size: 20px;
            font-weight: 900;
            margin: 10px;
        }
        .mykey{
            width: 90%;
            border: 1px solid #999;
            margin: 0 auto;
        }
        .title {
            position: relative;
            text-align: center;
            font-size: .36rem;
            margin-top: .36rem;
        }
        .title img{
            position: absolute;
            left: 4.8rem;
            top:.06rem;
            width: .36rem;
            transform: rotate(270deg);
        }
        #box{
           
            overflow: hidden;
            
        }
        .keyList{
           width: 50%;
           float: left;
           margin: .3rem 0;
            

        }
        #box1{
            margin: 0 auto;
            width: 50%;
            text-align: center;
        }
        .keyList img{
            
            width: 80%;
            padding: .3rem;
            background-color: #4BEAB7;
            border-radius: 50%;
        }
        .doorname{
            margin-top: .1rem;
            font-size: 14px;
        }
    </style>
    